---
type: tutorial
title: Envía tu primer script al navegador
i18nReady: true
description: >-
  Tutorial: Crea tu primer blog con Astro —
  Agrega interactividad del lado del cliente a tu navegación móvil con una etiqueta de script de Astro
---
import Badge from '~/components/Badge.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Añadamos un menú hamburguesa para abrir y cerrar los enlaces en pantallas de dispositivos móviles, lo que requiere cierta interactividad con el cliente.

<PreCheck>
  - Crear un componente de menú de hamburguesa
  - Escribir un `<script>` para que los visitantes de tu sitio puedan abrir y cerrar el menú de navegación
  - Mover tu JavaScript a un archivo `.js`.
</PreCheck>

## Construye un componente Hamburger

Crea un componente `<Hamburger />` para abrir y cerrar tu menú móvil.

<Steps>
1. Crea un archivo llamado `Hamburger.astro` en `src/components/`.
  

2. Copia el siguiente código en tu componente. Esto representará tu menú "hamburguesa" de 3 líneas para abrir y cerrar tus enlaces de navegación en móvil. (Añadirás los nuevos estilos CSS a `global.css` más tarde).

    ```astro title="src/components/Hamburger.astro"
    --- 
    ---
    <div class="hamburger">
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
    </div>
    ```

3. Coloca este nuevo componente `<Hamburger />` justo antes de tu componente `<Navigation />` en `Header.astro`. 

    <details>
    <summary>¡Enséñame el código!</summary>

      ```astro title="src/components/Header.astro" ins={2,7}
      ---
      import Hamburger from './Hamburger.astro';
      import Navigation from './Navigation.astro';
      ---
      <header>
        <nav>
          <Hamburger />
          <Navigation />
        </nav>
      </header>
      ```
      </details>

4. Añade los siguientes estilos para tu componente Hamburger:

    ```css title="src/styles/global.css" ins={2-13, 56-58}
    /* estilos de la barra de navegación*/
    .hamburger {
      padding-right: 20px;
      cursor: pointer;
    }

    .hamburger .line {
      display: block;
      width: 40px;
      height: 5px;
      margin-bottom: 10px;
      background-color: #ff9776;
    }

    .nav-links {
      width: 100%;
      top: 5rem;
      left: 48px;
      background-color: #ff9776;
      display: none;
      margin: 0;
    }

    .nav-links a {
      display: block;
      text-align: center;
      padding: 10px 0;
      text-decoration: none;
      font-size: 1.2rem;
      font-weight: bold;
      text-transform: uppercase;
    }

    .nav-links a:hover, a:focus {
      background-color: #ff9776;
    }

    .expanded {
      display: unset;
    }

    @media screen and (min-width: 636px) {
      .nav-links {
        margin-left: 5em;
        display: block;
        position: static;
        width: auto;
        background: none;
      }

      .nav-links a {
        display: inline-block;
        padding: 15px 20px;
      }

      .hamburger {
        display: none;
      }
    }
    ```
</Steps>


## Escribe tu primera etiqueta script

Tu encabezado aún no es **interactivo** porque no puede responder a la entrada del usuario, como hacer clic en el menú hamburguesa para mostrar u ocultar los enlaces de navegación. 

La adición de una etiqueta `<script>` proporciona JavaScript del lado del cliente para "escuchar" un evento del usuario y luego responder en consecuencia

<Steps>
1. Añade la siguiente etiqueta `<script>` a `index.astro`, justo antes de la etiqueta de cierre `</body>`.

    ```astro title="src/pages/index.astro" ins={2-6}
      <Footer />
      <script>
        document.querySelector('.hamburger').addEventListener('click', () => {
          document.querySelector('.nav-links').classList.toggle('expanded');
        });
      </script>
    </body>
    ```

2. Comprueba de nuevo la vista previa del navegador en varios tamaños y verifica que el menú de navegación funciona, que es responsivo al tamaño de la pantalla y que responde a las entradas del usuario en esta página.
</Steps>

### Importa un archivo `.js`

En lugar de escribir JavaScript directamente en cada página, puedes mover el contenido de la etiqueta `<script>` a su propio archivo `.js` en el proyecto.

<Steps>
1. Crea `src/scripts/menu.js` (tendrás que crear una nueva carpeta `/scripts/`) y mueve tu JavaScript a ella.

    ```js title="src/scripts/menu.js"
    document.querySelector('.hamburger').addEventListener('click', () => {
      document.querySelector('.nav-links').classList.toggle('expanded');
    });
    ```

2. Sustituye el contenido de la etiqueta `<script>` en `index.astro` por la siguiente importación de archivos:

    ```astro title="src/pages/index.astro" ins={7} del={3-5}
      <Footer />
      <script>
        document.querySelector('.hamburger').addEventListener('click', () => {
          document.querySelector('.nav-links').classList.toggle('expanded');
        });

        import "../scripts/menu.js";
      </script>
    </body>
    ```

3. Comprueba de nuevo la vista previa del navegador a un tamaño más pequeño y verifica que el menú hamburguesa todavía abre y cierra los enlaces de tu navegación.


4. Añade la misma etiqueta `<script>` con la importación a tus otras dos páginas, `about.astro` y `blog.astro` y comprueba que tienes un encabezado responsivo e interactivo en cada página.

    ```astro title="src/pages/about.astro & src/pages/blog.astro" ins={2-4}
      <Footer />
      <script>
        import "../scripts/menu.js";
      </script>
    </body>
    ```
</Steps>

:::note[Conclusión]
Anteriormente habías utilizado JavaScript para construir partes de tu sitio:

- Definir dinámicamente el título y la cabecera de la página
- Mapeo a través de una lista de competencias en la página 'Acerca de'
- Visualización condicional de elementos HTML

Todos esos comandos se ejecutan en tiempo de compilación para crear HTML estático para tu sitio, y luego el código se "tira". 

**El JavaScript de una etiqueta `<script>` se envía al navegador** y está disponible para ejecutarse en función de las interacciones del usuario, como actualizar una página o cambiar una entrada.
:::



<Box icon="question-mark">

### Pon a prueba tus conocimientos

1. ¿Cuándo ejecuta Astro cualquier JavaScript escrito en el frontmatter de un componente?
    <MultipleChoice>
      <Option>
       Astro nunca ejecuta JavaScript
      </Option>
      <Option isCorrect>
        en tiempo de compilación
      </Option>
      <Option>
         Cuando un visitante pulsa un botón
      </Option>
    </MultipleChoice>

2. Opcionalmente, Astro puede enviar JavaScript al navegador para permitir:
    <MultipleChoice>
      <Option>
        que los usuarios hagan clic en los enlaces de las páginas
      </Option>
      <Option>
        tiempos de carga más rápidos
      </Option>
      <Option isCorrect>
        interactividad del lado del cliente
      </Option>
    </MultipleChoice>

3. El JavaScript del lado del cliente se enviará al navegador del usuario cuando se escriba o importe:
    <MultipleChoice>
      <Option isCorrect>
        en etiquetas `<script>`.
      </Option>
      <Option>
        entre las vallas de código de un archivo `.astro`.
      </Option>
      <Option>
        en `global.css`
      </Option>
    </MultipleChoice>

</Box>

<Box icon="check-list">

## Checklist

<Checklist>
- [ ] Puedo añadir interactividad del lado del cliente con JavaScript en una etiqueta `<script>`.
- [ ] Puedo importar un archivo `.js` en una etiqueta `<script>`.
</Checklist>

</Box>

### Recursos

[Scripts del lado del cliente en Astro](/es/guides/client-side-scripts/)